<template>
  <div>
      <h3 class="title">代理发卡详情</h3>
    <group class="table_box"> 
      <x-table full-bordered style="background-color:#fff;font-size: .25rem;">
        <thead>
          <tr>
            <th>代理昵称</th>
            <th>代理ID</th>
            <th>房卡 (张)</th>
            <th>时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(record,index) in recordList" :key="index">
            <td>{{record.receive_name}}</td>
            <td>{{record.receive_id}}</td>
            <td>{{record.cardnum}}</td>
            <td>{{record.edittime}}</td>
          </tr>
        </tbody>
      </x-table>
      <div class="table_btn">
        <button @click="getUpPage()">上一页</button>
        <button @click="nextPage()">下一页</button>
      </div>
    </group>
  </div>
</template>
<script>
import { Group, XButton, XTable } from "vux";
export default {
  data() {
    return {
      recordList: [], //记录数据
      pagesize: 10, //每页显示条数
      page: 1, //当前页码
      maxPage: 0 //最大页数
    };
  },
  created() {
    this.getAgentRecord(this.pagesize, this.page);
  },
  components: {
    Group,
    XButton,
    XTable
  },
  methods: {
    getAgentRecord(pagesize, page) {
      this.apiService.agent
        .cardagentrecordlist({
          agentid: this.$route.query.agentid,
          pagesize: pagesize,
          currentpage: page
        })
        .then(res => {
          this.maxPage = Math.ceil(res.data.total / 10);
          this.recordList = res.data.recordlist;
        });
    },
    //上一页
    getUpPage() {
      if (this.page > 1) {
        this.page--;
        this.getAgentRecord(this.pagesize, this.page);
      }
    },
    //下一页
    nextPage() {
      if (this.page < this.maxPage && this.maxPage != 0) {
        this.page++;
        this.getAgentRecord(this.pagesize, this.page);
      }
    }
  }
};
</script>
<style scoped>
.title {
  font-size: 0.35rem;
  line-height: 1rem;
  text-align: center;
}
.table_btn {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem .2rem;
}
.table_btn button {
  color: #0085e7;
  font-size: 0.32rem;
}
.td_btn {
  line-height: 0.45rem;
  margin-bottom: 0.025rem;
}
</style>
